<template>
	<!-- 城市选择-->
	<view class="city-select">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="city-select-main" id="city-select-main">
			<!-- 预留搜索-->
			<view class="city-serach" v-if="isSearch">
				<input @input="keyInput" 
				placeholder-style="color:#ccc;font-size:28upx"
				placeholder="请输入跑团成员成名" 
				@focus="search_flag=true"
				@blur="search_flag=false"
				class="city-serach-input">
				<!-- <i class="icon">&#xe647;</i> -->
				<image class="icon_search" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/search_icon.png" mode=""></image>
				<view class="btn" v-if="search_flag">
					搜索
				</view>
			</view>
			<!-- {{activeCity.cityName}} -->
			<!-- 当前定位城市 -->
			<!-- <view class="hot-title" v-if="activeCity && !serachCity">团长</view> -->
			<view class="hot-city " v-if="activeCity && !serachCity">
				<view class=" hot_item_now">
					<image :src="activeCity.Avatar" mode=""></image>
					<text>{{activeCity.MemberName}}</text>
					<image class="vippic" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/manner.png" mode=""></image>
					<image class="idpic" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/mem_colonel.png" mode=""></image>
				</view>
			</view>
			<!-- 热门城市 -->
			<!-- <view class="hot-title" v-if="hotCity.length>0 && !serachCity">管理员</view> -->
			<view class="hot-city" v-if="hotCity.length>0 && !serachCity">
				<template v-for="(item,index) in hotCity">
					<view :key="index"  class="hot-item">
						<!-- {{item.cityName}} -->
						<image :src="item.Avatar" mode=""></image>
						<text>{{item.MemberName}}</text>
						<image class="vippic" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/manner.png" mode=""></image>
						<image class="idpic" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/mem_admin.png" mode=""></image>
					</view>
				</template>
			</view>
			<!-- 城市列表(搜索前) -->
			<view class="citys" v-if="!serachCity">
				<view v-for="(city,index) in sortItems" :key="index" v-show="city.isCity">
					<view class="citys-item-letter" :id="'city-letter-'+ (city.otherName || city.name)">{{city.name}}</view>
					<view class="citys-item" v-for="(item,inx) in city.citys" :key="inx" >
						<image :src="item.src" mode=""></image>
						<text>{{item.cityName}}</text>
						<!-- <image class="vippic" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/mem_svip.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<!-- 城市列表(搜索后)  -->
			<view class="citys" v-if="serachCity">
				<view v-for="(item,index) in searchDatas" :key="index">
					<view class="citys-item" :key="index" >
						<image :src="item.Avatar" mode=""></image>
						{{item.cityName}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 城市选择索引-->
		<view class="city-indexs-view" v-if="!serachCity">
			<view class="city-indexs">
				<!-- <view class="hot">
					热门
				</view> -->
				<view v-for="(cityIns,index) in handleCity" v-show="cityIns.isCity" :key="index" @click="cityindex(cityIns.otherName || cityIns.name)">
					{{cityIns.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import citySelect from "./citySelect.js"
	export default {
		props: {
			//当前定位城市
			activeCity: {
				type: Object,
				default: () => null
			},
			//热门城市
			hotCity: {
				type: Array,
				default: () => [],
			},
			//城市数据
			obtainCitys: {
				type: Array,
				default: () => [],
			},
			//是否有搜索
			isSearch: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 搜索按钮的显示隐藏
				search_flag:false,
				scrollTop: 0, //scroll-view 滑动的距离
				cityindexs: [], // 城市索引
				activeCityIndex: '', // 当前所在的城市索引
				handleCity: [], // 处理后的城市数据
				serachCity: '', // 搜索的城市
				cityData: [],
				top:0,
			};
		},
		computed: {
			/**
			 * @desc 城市列表排序
			 * @return  Array
			 */
			sortItems() {
				for (let index = 0; index < this.handleCity.length; index++) {
					if (this.handleCity[index].isCity) {
						var cityArr = this.handleCity[index].citys
						cityArr = cityArr.sort(function(a, b) {
							var value1 = a.unicode
							var value2 = b.unicode
							return value1 - value2
						})
					}
				}
				return this.handleCity
			},
			/**
			 * @desc 搜索后的城市列表
			 * @return Array
			 */
			searchDatas() {
				var searchData = []
				for (let i = 0; i < this.cityData.length; i++) {
					if (this.cityData[i].cityName.indexOf(this.serachCity) !== -1) {
						searchData.push(this.cityData[i])
					}
				}
				 // console.log (searchData)
				return searchData
			}
		},
		created() {
			// 初始化城市数据
			this.cityData = this.obtainCitys
			this.initializationCity()
			this.buildCityindexs()
		},
		watch:{
			obtainCitys(newData){
				this.updateCitys(newData)
			}
		},
		methods: {
			/**
			 * @desc 初始化
			 */
			updateCitys(data){
				if(data && data.length){
					this.cityData = data
					this.initializationCity()
					this.buildCityindexs()
				}
			},
			/**
			 * @desc 监听输入框的值
			 */
			keyInput(event) {
				this.serachCity = event.detail.value;
			},
			/**
			 * @desc 初始化城市数据
			 * @return undefind
			 */
			initializationCity() {
				this.handleCity = [];
				const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '*', '#'
				]
				for (let index = 0; index < cityLetterArr.length; index++) {
					if (cityLetterArr[index] === '*') {
						this.handleCity.push({
							name: cityLetterArr[index],
							isCity: false, // 用于区分是否含有当前字母开头的城市
							citys: [], // 存放城市首字母含是此字母的数组
							// 随便起个名字 你到时候改一下
							otherName: 'mh'
						})
					} else if (cityLetterArr[index] === '#') {
						this.handleCity.push({
							name: cityLetterArr[index],
							isCity: false, // 用于区分是否含有当前字母开头的城市
							citys: [], // 存放城市首字母含是此字母的数组
							// 随便起个名字 你到时候改一下
							otherName: 'jh'
						})
					} else {
						this.handleCity.push({
							name: cityLetterArr[index],
							isCity: false, // 用于区分是否含有当前字母开头的城市
							citys: [], // 存放城市首字母含是此字母的数组
						})
					}
					
				}
			},
			/**
			 * @desc 得到城市的首字母
			 * @param str String
			 */
			getLetter(str) {
				//  // console.log (citySelect.getFirstLetter(str[0]));
				return citySelect.getFirstLetter(str[0])
			},
			/**
			 * @desc 构建城市索引
			 * @return undefind
			 */
			buildCityindexs() {
				this.cityindexs = []
				
				for (let i = 0; i < this.cityData.length; i++) {
					// 获取首字母
					let cityLetter = this.getLetter(this.cityData[i].cityName).firstletter
					// 获取当前城市首字母的unicode，用作后续排序
					let unicode = this.getLetter(this.cityData[i].sort).unicode
					let src = this.cityData[i].Avatar;
					this.handleCity.forEach((item, index) => {
						if (item.name === this.cityData[i].sort) {
							item.citys.push({
								cityName: this.cityData[i].cityName,
								cityCode: this.cityData[i].cityCode,
								unicode: unicode,
								src: src
							})
							item.isCity = true
						}
						if (this.cityindexs.indexOf(cityLetter) < 0) {
							this.cityindexs.push(cityLetter)
						}
					})
					// let index = this.cityIndexPosition(cityLetter)
					// if (this.cityindexs.indexOf(cityLetter) < 0) {
					// 	this.handleCity[index].isCity = true
					// 	this.cityindexs.push(cityLetter)
					// }
					// this.handleCity[index].citys.push({
					// 	cityName: this.cityData[i].cityName,
					// 	cityCode: this.cityData[i].cityCode,
					// 	unicode: unicode
					// })
				}
				//  // console.log (this.handleCity)
			},
			/**
			 * @desc 滑动到城市索引所在的地方
			 * @param id String 城市索引
			 */
			cityindex(id) {
				//创建节点查询器
				const query = uni.createSelectorQuery().in(this);
				var that = this;
				that.scrollTop = 0;
				//滑动到指定位置(解决方法:重置到顶部，重新计算，影响:页面会闪一下)
				setTimeout(() => {
					query.select('#city-letter-' + id).boundingClientRect(data => {
						//  // console.log ("得到布局位置信息" + JSON.stringify(data));
						//  // console.log ("节点离页面顶部的距离为" + data.top);

						that.scrollTop = data.top
					}).exec();
				}, 0);
			},
			/**
			 * @desc 获取城市首字母的unicode
			 * @param letter String 城市索引
			 */
			cityIndexPosition(letter) {
				if (!letter) {
					return ''
				}
				const ACode = 65
				return (letter.charCodeAt(0) - ACode)
			},
			/** @desc 城市列表点击事件
			 *  @param Object
			 */
			// cityTrigger(item, isHot) {
			// 	// 传值到父组件
			// 	this.$emit('cityClick', item)
			// }
		}

	}
</script>

<style lang="scss">
	//宽度转换vw
	@function vww($number) {
		@return ($number / 375)*750+rpx;
	}

	view {
		box-sizing: border-box;
	}

	.city-serach {
		width: 100%;
		color: #4A4A4A;
		padding: 0 vww(10);
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-input {
			margin: vww(10) 0;
			flex: 1;
			height: 60upx;
			border-radius: 30upx;
			font-size: vww(14);
			padding: 0 vww(5);
			background-color: #F2F2F2;
			padding-left: 60upx;
			box-sizing: border-box;
		}
		.icon_search {
			position: absolute;
			width: 28upx;
			height: 28upx;
			left: 40upx;
			top: 51%;
			transform: translate(0 ,-50%);
		}
		.icon {
			position: absolute;
			top: 50%;
			transform: translate(15upx,-55%);
			font-size: 40upx;
			height: 40upx;
			color: #ccc;
		}
		.btn {
			width: 100upx;
			height: 60upx;
			border-radius: 30upx;
			margin: 20upx;
			background-color: #8837d2;
			color: #FFFFFF;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-right: 0;
			transition: all 1s ;
		}
	}

	.city-select-main {
		position: relative;
		// overflow: scroll;
		// -webkit-overflow-scrolling: touch;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		// overflow-y: auto;
	}

	.city-select {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #F2F2F2;

		// 热门城市
		.hot-title {
			padding-left: vww(15);
			width: 100vw;
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
		}

		.hot-city {
			padding-left: vww(15);
			padding-right: vww(20);
			overflow: hidden;
			width: 100vw;

			.hot-item {
				height: 130upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #e1e1e1;
				image {
					width: 84upx;
					height: 84upx;
					border-radius: 50%;
					margin-right: 10upx;
				}
				.vippic {
					width: 32upx;
					height: 32upx;
					border-radius: 0;
					margin-right: 10upx;
				}
				.idpic {
					width: 76upx;
					height: 29upx;
					border-radius: 0;
				}
				text {
					color: #333333;
					font-size: 28upx;
					margin-right: 10upx;
				}
				.icon {
					font-size: 32upx;
				}
			}
			.hot-item:last-child  {
				border-bottom: 0;
			}
			.hot-hidden {
				display: none;
				margin-right: 0;
			}
		}

		.citys {
			>view {
				// padding-left: vww(18);
				padding: 0 30upx;
				width: 100%;
				font-size: 14px;
				background: #FFF;

				.citys-item-letter {
					margin-left: vww(-18);
					padding-left: vww(18);
					margin-top: -1px;
					width: 100vw;
					line-height: vww(30);
					color: #343434;
					background: #F2F2F2;
					border-top: none;
				}

				.citys-item {
					width: 100%;
					height: 130upx;
					color: #343434;
					border-bottom: 2upx solid #e1e1e1;
					box-sizing: border-box;
					height: 130upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;	
					image {
						width: 84upx;
						height: 84upx;
						border-radius: 50%;
						margin-right: 10upx;
					}
					.vippic {
						width: 32upx;
						height: 32upx;
					}
					text {
						color: #333333;
						font-size: 28upx;
						margin-right: 10upx;
					}
					.icon {
						font-size: 32upx;
					}
					&:last-child {
						border: none;
					}
				}
			}
		}

		.city-indexs-view {
			position: absolute;
			right: 10upx;
			top: -100upx;
			z-index: 999;
			display: flex;
			width: vww(30);
			height: 100%;
			text-align: center;

			.city-indexs {
				width: vww(30);
				text-align: center;
				vertical-align: middle;
				align-self: center;
				.hot {
					font-size: 22upx;
					width: vww(30);
				}
				>view {
					margin-bottom: vww(2);
					width: vww(30);
					font-size: 12px;
					color: #a56ade;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	// 当前城市
	.hot_item_now {
		height: 130upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;	
		image {
			width: 84upx;
			height: 84upx;
			border-radius: 50%;
			margin-right: 10upx;
		}
		.vippic {
			width: 32upx;
			height: 32upx;
			border-radius: 0;
			margin-right: 10upx;
		}
		.idpic {
			width: 51upx;
			height: 29upx;
			border-radius: 0;
		}
		text {
			color: #333333;
			font-size: 28upx;
			margin-right: 10upx;
		}
		.icon {
			font-size: 32upx;
		}
	}
</style>
<style>
	page {
		background-color: #FFFFFF !important;
	}
</style>

